<template>
  <div class="environmental-indicators-container">
    <!-- 四个图标布局 -->
    <div class="indicators-grid">
      <!-- 绿电消纳量 -->
      <div class="indicator-item">
        <div class="icon-wrapper">
          <img src="@/assets/img/icon_01.png" alt="">
          <!-- <svg class="icon" viewBox="0 0 1024 1024">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#52c41a"/>
            <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="#52c41a"/>
          </svg> -->
        </div>
        <div class="content">
          <div class="label">绿电消纳量</div>
          <div class="value">{{ greenPowerConsumption.toLocaleString() }} <span class="unit">KWh</span></div>
        </div>
      </div>

      <!-- 减少碳排放量 -->
      <div class="indicator-item">
        <div class="icon-wrapper">
          <img src="@/assets/img/icon_02.png" alt="">
          <!-- <svg class="icon" viewBox="0 0 1024 1024">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#1890ff"/>
            <path d="M340 576h344c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H340c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" fill="#1890ff"/>
            <path d="M340 464h344c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H340c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" fill="#1890ff"/>
          </svg> -->
        </div>
        <div class="content">
          <div class="label">减少碳排放量</div>
          <div class="value">{{ carbonReduction.toLocaleString() }} <span class="unit">吨</span></div>
        </div>
      </div>

      <!-- 绿电指标 -->
      <div class="indicator-item">
        <div class="icon-wrapper">
          <img src="@/assets/img/icon_03.png" alt="">
          <!-- <svg class="icon" viewBox="0 0 1024 1024">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#faad14"/>
            <path d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72-112h-48c-4.4 0-8-3.6-8-8V296c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8z" fill="#faad14"/>
          </svg> -->
        </div>
        <div class="content">
          <div class="label">绿电指标</div>
          <div class="value">{{ greenPowerIndex.toLocaleString() }} <span class="unit">MWh</span></div>
        </div>
      </div>

      <!-- 绿证指标 -->
      <div class="indicator-item">
        <div class="icon-wrapper">
          <img src="@/assets/img/icon_04.png" alt="">
          <!-- <svg class="icon" viewBox="0 0 1024 1024">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#722ed1"/>
            <path d="M512 288l78.4 158.9 175.6 25.5-127 123.8 30 174.8L512 695.4 354 771l30-174.8-127-123.8 175.6-25.5z" fill="#722ed1"/>
          </svg> -->
        </div>
        <div class="content">
          <div class="label">绿证指标</div>
          <div class="value">{{ greenCertIndex.toLocaleString() }} <span class="unit">张</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

// 四个指标的数据
const greenPowerConsumption = ref(1234567) // 绿电消纳量 (KWh)
const carbonReduction = ref(8956) // 减少碳排放量 (吨)
const greenPowerIndex = ref(2345) // 绿电指标 (MWh)
const greenCertIndex = ref(1567) // 绿证指标 (张)


onMounted(() => {
  // 这里可以添加数据获取逻辑
})

const getData = (data: any) => {
  let obj = JSON.parse(data)
  greenPowerConsumption.value = obj.greenPowerConsumption
  carbonReduction.value = obj.carbonReduction
  greenPowerIndex.value = obj.greenPowerIndex
  greenCertIndex.value = obj.greenCertificateIndex

}

defineExpose({
  getData
})

</script>

<style lang="less" scoped>
.environmental-indicators-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.9) 0%, rgba(0, 30, 60, 0.8) 100%);
  border-radius: 8px;
  border: 1px solid rgba(124, 189, 207, 0.3);
  
  .indicators-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    height: 100%;
    
    .indicator-item {
      display: flex;
      align-items: center;
      padding: 15px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
      border-radius: 8px;
      border: 1px solid rgba(124, 189, 207, 0.2);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(124, 189, 207, 0.15);
        border-color: rgba(124, 189, 207, 0.4);
      }
      
      .icon-wrapper {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        
        .icon {
          width: 30px;
          height: 30px;
        }
      }
      
      .content {
        flex: 1;
        
        .label {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
          margin-bottom: 5px;
          font-weight: 400;
        }
        
        .value {
          font-size: 18px;
          color: #ffffff;
          font-weight: bold;
          margin-bottom: 2px;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        .unit {
          font-size: 11px;
          color: rgba(124, 189, 207, 0.8);
          font-weight: 400;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .environmental-indicators-container {
    .indicators-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, 1fr);
      gap: 10px;
      
      .indicator-item {
        padding: 12px;
        
        .icon-wrapper {
          width: 40px;
          height: 40px;
          margin-right: 12px;
          
          .icon {
            width: 24px;
            height: 24px;
          }
        }
        
        .content {
          .value {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>